<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <?php include_http_metas() ?>
    <?php include_metas() ?>
    <?php include_title() ?>
    <link rel="shortcut icon" href="/favicon.ico" />
    <?php include_stylesheets("main.css") ?>
    <?php include_javascripts() ?>
    <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;&v=2&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxSPW5CJgpdgO_s4yyMovOaVh_KvvhSfpvagV18eOyDWu7VytS6Bi1CWxw"></script>
  <script type="text/javascript" src="/js/jquery.js"></script>
  <script type="text/javascript" src="/js/Master_Search/searchbox.js"></script>
  <script type="text/javascript" src="/js/Module_searchresult/index.js"></script>
  <script src="/js/ui/jquery.ui.core.js"></script>
  <script type="text/javascript" src="/js/Flot/jquery.flot.js"></script>
  <script type="text/javascript" src="/js/Flot/jquery.flot.stack.js"></script>
  <script language="javascript" type="text/javascript" src="/js/Flot/jquery.flot.text.js"></script>
 <script language="javascript" type="text/javascript" src="/js/General/Canvas2Image.js"></script>
  <script type="text/javascript" src="/js/Main_Module/map.js"></script>
  <script type="text/javascript" src="/js/General/general.js"></script>
	<script src="/js/ui/jquery.ui.widget.js"></script>
	<script src="/js/ui/jquery.ui.accordion.js"></script>
        	<script src="/js/ui/jquery.ui.position.js"></script>
	<script src="/js/ui/jquery.ui.autocomplete.js"></script>
        	<script type="text/javascript" src="/js/ui/jquery.effects.blind.js"></script>

	<script type="text/javascript" src="/js/ui/jquery.effects.bounce.js"></script>
	<script type="text/javascript" src="/js/ui/jquery.effects.clip.js"></script>
	<script type="text/javascript" src="/js/ui/jquery.effects.drop.js"></script>
	<script type="text/javascript" src="/js/ui/jquery.effects.explode.js"></script>
	<script type="text/javascript" src="/js/ui/jquery.effects.fold.js"></script>
	<script type="text/javascript" src="/js/ui/jquery.effects.highlight.js"></script>

	<script type="text/javascript" src="/js/ui/jquery.effects.pulsate.js"></script>
	<script type="text/javascript" src="/js/ui/jquery.effects.scale.js"></script>
	<script type="text/javascript" src="/js/ui/jquery.effects.shake.js"></script>
	<script type="text/javascript" src="/js/ui/jquery.effects.slide.js"></script>

        
      <script src="/js/ui/jquery.ui.button.js"></script>

        <link rel="stylesheet" href="/css/theme/ui-lightness/jquery.ui.all.css">
<!--[if IE]><script language="javascript" type="text/javascript" src="/js/Flot/excanvas.js"></script><![endif]-->
	 

  </head>
  <body>
        
        <table id="header">
            <tr>
                <td rowspan="2" width="67px"><img id="mainico" alt="Red Sea 2.0" src="/images/Only_logo.png" /></td>
                <form action="" name="Login" method="POST">
                    <td width="170px"><input class="loginbox" type="text" name="Email" value="Email" size="27"/></td>
                    <td width="170px"><input class="loginbox" type="password" name="Password" value="Password" size="27"/></td>
                    <td width="60px"><a id="buttonlogin" class="button" href="">Login</a></td>
                </form>
               
                <td rowspan="2"></td>

                <td rowspan="2" width="40px" align=>
<!--                <a class="bigbutton" href="">
                    <div class="topright">
                        <img id="reporting" alt="Report/Charts" src="/images/overlay_button_inactive.png"/><p>Overlay</p>
                    </div>
                </a>-->
                </td>
                
                <td rowspan="2" width="40px">
<!--                <a class="bigbutton" onclick="return updateObservationStatus(document.getElementById('hfBtnObservationStatus'),'imgObservation','/images/btn_observation_enabled.png','/images/btn_observation_disabled.png');">
                    <div class="topright">
                        <img id="reporting" name="imgObservation" alt="Points of Observations" src="/images/btn_observation_enabled.png" /><p>Observation</p>
                    </div>
                </a>
                    <input type="hidden" value="1" name="hfBtnObservationStatus" id="hfBtnObservationStatus" />-->
                </td>

                <td rowspan="2" width="40px" align="center">
                <a class="bigbutton report-slide" href="" id="lnkChart">
                    <div class="topright report-slide">
                        <img id="imgChart" alt="Report/Charts" src="/images/report_button.png"/><p>Report</p>
                    </div>
                </a>
                <input type="hidden" value="0" name="hfBtnChartStatus" id="hfBtnChartStatus" />
                </td>
                
                <td rowspan="2" width="75px" style="border-left: 1px white dashed" align="center">
                <a class="bigbutton" onclick="updateImage()"> <!--updateImage();-->
                    <div class="topright">
                        <img id="reporting" name="imgObservation" alt="Points of Observations" src="/images/save.png" width="35px" height="35px" /><p>Save Map</p>
                    </div>
                </a>
                </td>


                
                
                
                <form action=""  method="post" id="form1">
                    

                    <td width="270px"><input id="searchbox" type="text" name="Search"  size="50"  value="Search the web..." class="ui-autocomplete-input"/></td>
                    <td width=40px"><a id="search" href=""><img alt="Report/Charts" src="/images/search_button.png" /></a></td>
                    
                </form>
            </tr>
            
            <tr>
                <td><p><input type="checkbox" name="Remember me" value="OFF" />Remember me </p></td>
                <td><a href="">Forgot the password?</a></td>
                <td></td>
                <td colspan="2" width="310px" class="ShowHideButton" >

<!--                   <span class="btn-slide">Show Results</span>-->
                    <div  id="tdShowHide" style="padding-left: 20px;"></div>
                    <a>
                        <img class="btn-slide" name="imgshowhide" alt="Points of Observations" src="/images/show_accordion.png" height="23px;"/>
                    </a>
                    <input type="hidden" value="1" name="hfBtnshowhideStatus" id="hfBtnshowhideStatus" />
                </td>
            </tr>
        </table>
        
            <div id="reportarea">
                <table id="reportarea_table">
                    <tr>
                        <td id="tdNoData" rowspan="2" style="border-right: 1px silver dashed"><div id="chart_canvas"> </div></td>
                        <td width="100%" colspan="2" style="border-bottom: 1px silver dashed;">
                            <div id="chart_legend">
                                <!--<span class='caption'>Legend: </span>-->
                                <span id='spFishList'></span>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td height="70px">
                            <div id="hide_data">
                                <span class='caption'>&nbsp;Unit: </span>
                                <span id='spUnitList'></span>
                                <br/>
                                <span class='caption'>&nbsp;Depth: </span>
                                <span id='spDepthList'></span>
                                <br/>
                                <span class='caption'>&nbsp;Year: </span>
                                <span id='spYearList'></span>
                                <br/>
                            </div>
                        </td>
                        <td height="70px" width="75px" align="center" style="border-left: 1px silver dashed;">
                            <a onclick="saveFlotGraphAsPNG('chart_canvas','content')" href="#"><img id="reporting" name="imgObservation" alt="Points of Observations" src="/images/save.png" width="35px" height="35px" style="margin:0px;padding:0px;"/><p>Save Report</p></a>
                        </td>
                    </tr>
                </table>

<!--                <br style="display: none" />
                <div id="chart_legend">                    
                    
                    <span class='caption'>Legend: </span>
                    <span id='spFishList'></span>
                </div>-->
                
            </div>
        
        <div id="panel" >

          <div id="accordion">

                <h3><a href="#">Search Results<span id="TotalCount"></span></a></h3>

                               <div id="searchresult" >


                               </div>

                            <h3 id="citation_heading"><a href="#">Citation</a></h3>
                            <div id="citation">
                                                   
                            </div>
                            <h3><a href="#">History</a></h3>
                            <div id="history">
                               
                            </div>

  </div>

</div>

      <div id="map">
            <div id="charts"></div>
            <div id="rightbar"></div>
        </div>

      
            <div id="content">
                
    <?php echo $sf_content ?>
                
            </div>

                      
  </body>
</html>
